<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    {include file='common/require'/}
    <script>
        var currentLeftNavItem = 'channel'
    </script>
</head>

<body>

    {include file='common/left_menu'/}

    <div class="main-container">
        <div class="main-header">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">隧道管理</a>
                <a href=""><cite>端口隧道</cite></a>
            </span>
        </div>

        <div class="main-body">
            <div>
                <blockquote class="layui-elem-quote">隧道必须基于客户端。请先添加客户端。</blockquote>
            </div>
            <div class="control-container">
                <div class="layui-btn-container">
                    <a class="layui-btn layui-btn-normal create"
                        href="{:url('Index/select',['target'=>'Channel/create'])}">新建隧道</a>
                </div>
                <div class="right-container">
                    <form action="">
                        <div>
                            <input style="width: 160px;display: inline-block;" type="text" name="keywords"
                                class="layui-input" value="{$Request.param.keywords}" placeholder="请输入关键字">
                            <button class="layui-btn">搜索</button>
                        </div>
                    </form>
                </div>
            </div>
            <div>
                <table class="layui-table" lay-skin="line" lay-size="sm">
                    <!-- <colgroup>
                      <col width="150">
                      <col width="200">
                      <col>
                    </colgroup> -->
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>类型</th>
                            <th>客户端</th>
                            <th>服务端口</th>
                            <th>目标IP</th>
                            <th>目标端口</th>
                            <th>状态</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {volist name='list' id='vo'}
                            
                        <tr data-item="{$vo->toJson()}">
                            <td>{$vo.id}</td>
                            <td>{$vo.name}</td>
                            <td>{$vo.type}</td>
                            <td>{$vo.client.name}</td>
                            <td>{$vo.server_port}</td>
                            <td>{$vo.local_target_ip}</td>
                            <td>{$vo.local_target_port}</td>
                            <td>
                                <span class="set-status text-button">{$vo.status}</span>
                            </td>
                            <td>{$vo.comment}</td>
                            <td>
                                <div class="layui-btn-container">
                                    <a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id])}">编辑</a>
                                    <div class="layui-btn layui-btn-sm delete">删除</div>
                                </div>
                            </td>
                        </tr>
                        {/volist}
                        {empty name='list'}
                            <tr>
                                <td colspan="10">暂无数据</td>
                            </tr>
                        {else /}
                        {/empty}
                    </tbody>
                </table>
                <div>
                    {$list->render()|raw}
                </div>
            </div>
        </div>
    </div>
    {include file='common/footer'/}

    <script>
    
        layui.use([],function(){
            $('.set-status').click(function(){
                var item = this;
                var status = '正常'
                if($(item).parents('tr').data('item').status == '正常'){
                    status = '禁用'
                }
                $.post('{:url("update")}',{
                    id:$(item).parents('tr').data('item').id,
                    status:status
                },function(result){
                    if(result.code == 0){
                        layer.msg('修改成功')
                        $(item).parents('tr').data('item',result.data)
                        $(item).text(result.data.status)
                    }else{
                        layer.msg(result.msg)
                    }
                })
            })

            $('.delete').click(function(){
                var item = this;
                layer.confirm('确定要删除吗？',function(index){

                    $.post('{:url("delete")}',{
                        id:$(item).parents('tr').data('item').id
                    },function(result){
                        if(result.code == 0){
                            layer.msg('删除成功')
                            layer.close(index)
                            $(item).parents('tr').remove()
                            
                        }else{
                            layer.msg(result.msg)
                        }
                    })
                })
            })
        })
    </script>
</body>

</html>